import React, { useState } from 'react';

import { NavBar, Icon, Badge, List, InputItem, Picker, Checkbox, DatePicker, TextareaItem, Button, Tabs } from 'antd-mobile';

import { createForm } from 'rc-form'

import { sexList } from '@/assets/js/dict.js'

import './publish.scss';

const AgreeItem = Checkbox.AgreeItem;

function Publish (props) {
    const [PublishInfoForm, SetPublishInfoForm] = useState({})
    const [isCheckout, SetIsCheckout] = useState(false)

    let handleOk = () => {
        let postData = {};
        postData = props.form.getFieldsValue()
        console.log('isCheckout ------->>>', isCheckout)
        console.log('PublishInfoForm ------->>>', postData)
    }

    const tabs = [
        { title: <Badge text={'3'}>基本信息</Badge> },
        { title: <Badge text={'今日(20)'}></Badge> },
        { title: <Badge dot>Third Tab</Badge> },
    ];

    const { getFieldProps } = props.form;
    return (
        <div className="publish">
            <div className="page-title  publish-tit">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => {
                        props.history.goBack()
                    }}
                >
                    发布信息
                </NavBar>
            </div>

            <div className="page-content publish-content">

                <div className="publish-content-piece">
                    <div className="form-box">
                        <div className="form-tit">
                            <i className="mini-block"></i>
                            <strong>基本信息</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <InputItem
                                    {...getFieldProps('PublishInfoForm.name')}
                                    clear
                                    placeholder="请输入"
                                >家长贵姓</InputItem>

                                <Picker
                                    data={sexList}
                                    cols={1}
                                    {...getFieldProps('PublishInfoForm.parentSex')}

                                >
                                    <List.Item arrow="horizontal">家长性別</List.Item>
                                </Picker>

                                <InputItem
                                    {...getFieldProps('PublishInfoForm.name')}
                                    clear
                                    placeholder="请输入"
                                >孩子年级</InputItem>
                                <Picker
                                    data={sexList}
                                    cols={1}
                                    {...getFieldProps('PublishInfoForm.childSex')}

                                >
                                    <List.Item arrow="horizontal">孩子性別</List.Item>
                                </Picker>
                                <InputItem
                                    {...getFieldProps('PublishInfoForm.subject')}
                                    clear
                                    placeholder="请输入"
                                >辅导科目</InputItem>
                                <InputItem
                                    {...getFieldProps('PublishInfoForm.subject')}
                                    clear
                                    placeholder="具体到校区即可"
                                >上课地址</InputItem>
                            </List>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block"></i>
                            <strong>详情要求</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <InputItem
                                    {...getFieldProps('PublishInfoForm.subject')}
                                    clear
                                    placeholder="可以上课的空余时间"
                                >可授课时间段</InputItem>
                                <InputItem
                                    {...getFieldProps('PublishInfoForm.school')}
                                    placeholder="请输入"
                                    clear
                                >学校</InputItem>

                                <InputItem
                                    labelNumber="8"
                                    editable={false}
                                >孩子情况简介</InputItem>

                                <TextareaItem
                                    {...getFieldProps('PublishInfoForm.explain')}
                                    placeholder="请输入"
                                    clear
                                    rows="6"
                                    autoHeight
                                    rows={5}
                                    count={100}
                                />

                                <InputItem
                                    labelNumber="8"
                                    editable={false}
                                >对家教老师的要求</InputItem>

                                <TextareaItem
                                    {...getFieldProps('PublishInfoForm.demand')}
                                    placeholder="请输入"
                                    clear
                                    rows="6"
                                    autoHeight
                                    rows={5}
                                    count={100}
                                />


                            </List>
                        </div>
                        <div className="form-footer">
                            <p className="notes">
                                注：这是一段测试！
                                <br />
                                根据学生年级距离，提示家长最低课时费
                            </p>

                            <AgreeItem data-seed="logId" value={isCheckout} onChange={e => {
                                console.log('checkbox', e);
                                SetIsCheckout(!isCheckout)
                            }}>
                                &nbsp;
                                <a onClick={(e) => { e.preventDefault(); alert('这个一段协议'); }}>
                                    请仔细阅读并同意后方可提交订单
                                </a>
                            </AgreeItem>
                            <Button type="primary" onClick={() => { handleOk() }} disabled={!isCheckout}>提交订单</Button>
                        </div>
                    </div>
                </div>
            </div>
        </div >
    );
}

Publish = createForm()(Publish);

export default Publish;